<template>
    <view>
        <!-- <view class="h100 width_1 f fpc fac" v-if="showActivity" style="position: absolute; background-color: rgba(0, 0, 0, 0.2); z-index: 99">
            <view class="width_65 f fac fv slide-in-elliptic-top-fwd" style="height: 700rpx">
                <view class="bg-gradual-red f fv fac fpa width_1 margin-bottom-lg padding-tb-lg" style="height: 85%">
                    <view class="text-yellow text-xxl font_w">新客享好礼</view>
                    <view class="text-yellow text-xxl">活动通知</view>
                    <ticket class="width_65" :ltext="item.ltext" :rtext="item.rtext" v-for="(item, index) in qlist" :key="index"></ticket>
                </view>
                <van-icon name="clear" size="32px" @tap.native="close" color="white" />
            </view>
        </view> -->
		<uni-notice-bar class="po_a width_1" v-if="nickname == '点击登录'" show-close single text="为了您更好的功能体验，请登录。" />
        <!-- <van-notice-bar class="po_a width_1" v-if="nickname == '点击登录'" mode="closeable" text="为了您更好的功能体验，请登录。" /> -->
        <view class="bg-gradual-green h100 f fv padding-sm">
            <view>
                <view class="f fac fpj width_1" @tap="showLoginFun">
                    <view class="f fac width_2">
                        <view class="cu-avatar lg round margin-right-lg">
                            <image v-if="avatarUrl" class="fill" :src="avatarUrl" style="border-radius: 500rpx"></image>
                            <text v-else class="cuIcon-people"></text>
                        </view>
                        <view>{{ nickname }}</view>
                    </view>
                    <!-- <view wx:if="{{nickname}}" bind:tap="exit">退出登录</view> -->
                </view>
                <!-- <view class="f fac fpc text-xxl" style="height: 100rpx;background: transparent;">当前等级</view> -->
                <view class="f fac fpa text-lg margin-top-lg" style="height: 140rpx; background: transparent">
                    <view class="f fv fpc fac">
                        0
                        <view>积分</view>
                    </view>
                    <view>|</view>
                    <view class="f fv fpc fac">
                        0
                        <view>优惠券</view>
                    </view>
                    <view>|</view>
                    <view class="f fv fpc fac">
                        0
                        <view>数据</view>
                    </view>
                </view>
                <view class="f fac fpj bg-black padding-sm margin-top-xs" style="height: 170rpx; border-radius: 5px">
                    <view class="f fac">
                        <view class="gradient-text">VIP</view>
                        <view class="margin-left-sm gradient-text2 text-lg font_w">升级会员 · 享受专属特权</view>
                    </view>
                    <view class="f fv fac">
                        <van-button size="small" round @tap.native="toCenter">会员详情</van-button>
                    </view>
                </view>
                <view class="f fv bg-white padding-sm margin-top-lg radius5">
                    <!-- <view class="text-lg">个人中心</view> -->
                    <!-- <view class="f fv" bind:tap="toOrders">
        <van-icon name="records-o" size="30px" />
        <view class="text-sm margin-top-xs">我的订单</view>
      </view>
      <view class="f fv" bind:tap="toCoupons">
        <van-icon name="coupon-o" size="30px" />
        <view class="text-sm margin-top-xs">我的优惠券</view>
      </view>
      <view class="f fv" bind:tap="toPoints">
        <van-icon name="points" size="30px" />
        <view class="text-sm margin-top-xs">我的积分</view>
      </view>
      <view class="f fv" bind:tap="toDatas">
        <van-icon name="chart-trending-o" size="30px" />
        <view class="text-sm margin-top-xs">数据中心</view>
      </view> -->
	  <uni-list :border="false">
		  <uni-list-item :show-extra-icon="true" :extra-icon="{size: '22',type: 'calendar'}" title="我的订单" clickable  @click="toOrders"  link to="../subpages/pages/orders/index"></uni-list-item>
		  <uni-list-item :show-extra-icon="true" :extra-icon="{size: '22',type: 'gift'}" title="我的优惠券" clickable  @click="toCoupons"  link to="../subpages/pages/coupons/index"></uni-list-item>
		  <uni-list-item :show-extra-icon="true" :extra-icon="{size: '22',type: 'medal'}" title="我的积分" clickable  @click="toPoints"  link to="../subpages/pages/points/index"></uni-list-item>
		  <uni-list-item :show-extra-icon="true" :extra-icon="{size: '22',type: 'bars'}" title="数据中心" clickable  @click="toDatas"  link to="../subpages/pages/datas/index"></uni-list-item>
	  </uni-list>
                </view>
            </view>
            <uni-popup :show="showLogin" ref="popup" type="top" custom-style="height: 400rpx;width: 100%;" @close="showLoginFun">
                <form @submit="input1input">
                    <view class="cu-form-group f fac padding-tb-sm">
                        <view class="width_4 text-black">头像</view>
                        <view class="f f1 fpc">
                            <button class="cu-avatar lg round" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                                <image class="fill" :src="avatarUrl"></image>
                            </button>
                        </view>
                    </view>
                    <view class="cu-form-group f fac">
                        <view class="width_4 text-black">昵称</view>
                        <input @change="onChooseName" style="text-align: center" type="nickname" class="f1" placeholder="请输入昵称" />
                    </view>
                </form>
                <view class="cu-form-group f fpc width_1">
                    <button plain type="primary" @tap.native="saveUserInfo" size="mini">保存</button>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
// import toas from '../../components/toast3/index';
// import ticket from '../../components/quan/index';
// page/cloud/index.js
export default {
    // components: {
    //     toas,
    //     ticket
    // },
    data() {
        return {
            showActivity: false,
            showLogin: false,
            avatarUrl: '',
            nickname: '点击登录',

            qlist: [
                {
                    ltext: '限时抵用券',
                    rtext: '100元',
                    pick: false
                },
                {
                    ltext: '限时折扣券',
                    rtext: '8.8折',
                    pick: false
                }
            ],

            selected: 0
        };
    },
    onLoad: function (n) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示  自定义导航栏赋值
     */
    onShow() {
        let userinfo = uni.getStorageSync('userinfo');
        if (userinfo) {
            this.setData({
                avatarUrl: userinfo.avatar,
                nickname: userinfo.nickname
            });
        } else {
            ('');
        }
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 3
            });
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        saveUserInfo() {
            if (!this.nickname || this.nickname == '点击登录' || !this.avatarUrl) {
                uni.showToast({
                    title: '请正确填写昵称和头像',
                    icon: 'error'
                });
                return;
            }
            let that = this;
            uni.getUserInfo({
                //成功后会返回
                success: (res) => {
                    console.log(res);
                    // 把你的用户信息存到一个变量中方便下面使用
                    let userInfo = res.userInfo;
                    //获取openId（需要code来换取）这是用户的唯一标识符
                    // 获取code值
                    uni.login({
                        //成功放回
                        success: (res) => {
                            let code = res.code;
                            // 通过code换取openId
                            uni.request({
                                url: `https://api.weixin.qq.com/sns/jscode2session?appid=wxf84ba857c0c63de8&secret=e7eaca6861562bacb9909985f963288c&js_code=${code}&grant_type=authorization_code`,
                                success: (res) => {
                                    let info = {
                                        openid: res.data.openid,
                                        nickname: that.nickname,
                                        avatar: that.avatarUrl
                                    };
                                    uni.setStorageSync('userinfo', info);
                                    that.showLoginFun();
                                    uni.showToast({
                                        title: '登录成功'
                                    });
                                }
                            });
                        }
                    });
                }
            });
        },

        showLoginFun() {
            // console.log(this.nickname);
            if (this.nickname != '点击登录' && this.nickname) {
				this.$refs.popup.close('top')
            } else {
				this.$refs.popup.open('top')
            }
        },

        onChooseAvatar(e) {
            const { avatarUrl } = e.detail;
			this.avatarUrl = avatarUrl
        },

        onChooseName(e) {
			this.nickname = e.detail.value
        },

        toCenter() {
            if (!this.avatarUrl) {
                uni.showToast({
                    title: '请先登录',
                    icon: 'error'
                });
                return;
            }
            uni.navigateTo({
                url: '../../subpages/pages/vipCenter/index'
            });
        },

        close() {
            this.setData({
                showActivity: false
            });
        },

        toOrders() {
            // if (!this.avatarUrl) {
            //     uni.showToast({
            //         title: '请先登录',
            //         icon: 'error'
            //     });
            //     return;
            // }
            uni.navigateTo({
                url: '../../subpages/pages/orders/index'
            });
        },

        toCoupons() {
            if (!this.avatarUrl) {
                uni.showToast({
                    title: '请先登录',
                    icon: 'error'
                });
                return;
            }
            uni.navigateTo({
                url: '../../subpages/pages/coupons/index'
            });
        },

        toPoints() {
            if (!this.avatarUrl) {
                uni.showToast({
                    title: '请先登录',
                    icon: 'error'
                });
                return;
            }
            uni.navigateTo({
                url: '../../subpages/pages/points/index'
            });
        },

        toDatas() {
            if (!this.avatarUrl) {
                uni.showToast({
                    title: '请先登录',
                    icon: 'error'
                });
                return;
            }
            uni.navigateTo({
                url: '../../subpages/pages/datas/index'
            });
        },

        input1input() {
            console.log('占位：函数 input1input 未声明');
        }
    }
};
</script>
<style>
</style>
